<!-- pages/member/activate-card/success.vue -->
<template>
  <view class="success-page">
    <view class="success-content">
      <!-- 成功图标 -->
      <view class="success-icon">
        <text class="icon">✓</text>
      </view>
      
      <!-- 成功标题 -->
      <view class="success-title">开通成功！</view>
      
      <!-- 成功描述 -->
      <view class="success-desc">
        恭喜您已成为{{ cardInfo.title }}会员
      </view>
      
      <!-- 会员信息 -->
      <view class="member-info">
        <view class="info-item">
          <text class="label">会员卡号</text>
          <text class="value">{{ memberInfo.memberNumber }}</text>
        </view>
        <view class="info-item">
          <text class="label">会员等级</text>
          <text class="value">{{ memberInfo.level }}</text>
        </view>
        <view class="info-item">
          <text class="label">开通时间</text>
          <text class="value">{{ memberInfo.activateTime }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="btn primary" @click="viewCard">
          查看会员卡
        </button>
        <button class="btn secondary" @click="goHome">
          返回首页
        </button>
      </view>
      
      <!-- 提示信息 -->
      <view class="tips">
        <text class="tip-text">
          💡 会员卡已添加到微信卡包，可在微信中查看和使用
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardId: '',
      memberId: '',
      cardInfo: {},
      memberInfo: {}
    };
  },
  
  onLoad(options) {
    this.cardId = options.cardId;
    this.memberId = options.memberId;
    this.loadSuccessData();
  },
  
  methods: {
    async loadSuccessData() {
      try {
        // 加载会员卡和会员信息
        const response = await this.$api.memberCard.getSuccessInfo({
          cardId: this.cardId,
          memberId: this.memberId
        });
        
        if (response.success) {
          this.cardInfo = response.data.cardInfo;
          this.memberInfo = response.data.memberInfo;
        }
      } catch (error) {
        console.error('加载成功页面数据失败:', error);
      }
    },
    
    viewCard() {
      if (this.$platform.isH5) {
        // H5 环境打开微信卡包
        this.openWechatCard();
      } else {
        // 小程序环境跳转到卡券页面
        uni.navigateTo({
          url: `/pages/member/my-card?cardId=${this.cardId}`
        });
      }
    },
    
    openWechatCard() {
      // 调用微信打开卡券接口
      if (window.wx && window.wx.openCard) {
        window.wx.openCard({
          cardList: [{
            cardId: this.cardId,
            code: this.memberInfo.memberNumber
          }]
        });
      } else {
        uni.showToast({
          title: '请在微信中查看卡包',
          icon: 'none'
        });
      }
    },
    
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style scoped>
.success-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.success-content {
  background: white;
  border-radius: 30rpx;
  padding: 80rpx 60rpx;
  text-align: center;
  width: 100%;
  max-width: 600rpx;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  background: #07C160;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40rpx;
}

.success-icon .icon {
  color: white;
  font-size: 60rpx;
  font-weight: bold;
}

.success-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.success-desc {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 60rpx;
}

.member-info {
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 60rpx;
  text-align: left;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e9ecef;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-size: 28rpx;
  color: #666;
}

.info-item .value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 40rpx;
}

.btn {
  height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}

.btn.primary {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  color: white;
}

.btn.secondary {
  background: transparent;
  border: 2rpx solid #667eea;
  color: #667eea;
}

.tips {
  background: #e7f3ff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #1890ff;
  line-height: 1.5;
}
</style>